import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import Card from './Card.vue';
import CardSection from './CardSection.vue';
import Carousel from './Carousel.vue';
import FlexRow from './FlexRow.vue';
import MaxHeight from './MaxHeight.vue';
import Table from './Table.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Card</h5>
            <Card />
          </div>
          <div class='block-'>
            <h5 class='title'>CardSection</h5>
            <CardSection />
          </div>
          <div class='block-'>
            <h5 class='title'>Carousel</h5>
            <Carousel />
          </div>
          <div class='block-'>
            <h5 class='title'>FlexRow</h5>
            <FlexRow />
          </div>
          <div class='block-'>
            <h5 class='title'>MaxHeight</h5>
            <MaxHeight />
          </div>
          <div class='block-'>
            <h5 class='title'>Table</h5>
            <Table />
          </div>
        </div>
      );
    };
  },
});
